<template>
    <div>
        <el-breadcrumb :separator-icon="ArrowRight">
            <el-breadcrumb-item class="nav-item" :to="{ path: '/main' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item class="nav-item" >用户管理</el-breadcrumb-item>
            <el-breadcrumb-item class="nav-item" >用户列表</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="content">
            <el-form :inline="true" class="demo-form-inline">
                <el-form-item>
                    <el-input class="ipt" placeholder="请输入内容">
                        <template #append>
                            <el-button :icon="Search"></el-button>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="show = true">添加用户</el-button>
                </el-form-item>
            </el-form>
            <el-table :data="tableData" style="width: 100%" border>
                <el-table-column align="left" label="#" width="180">
                    <template #default="scope">{{scope.$index + 1}}</template>
                </el-table-column>
                <el-table-column prop="username" label="姓名" width="180" />
                <el-table-column prop="email" label="邮箱" />
                <el-table-column prop="mobile" label="电话" width="180" />
                <el-table-column prop="role_name" label="角色" width="180" />
                <el-table-column prop="mg_state" label="状态">
                    <template #default="scope">
                        <el-switch v-model="scope.row.mg_state"/>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button type="primary" :icon="Edit"></el-button>
                        <el-button type="warning" :icon="Star"></el-button>
                        <el-button type="danger" :icon="Delete"></el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-dialog v-model="show" title="添加用户">
            <el-form class="demo-form-inline" label-width="60px">
                 <el-form-item label="*用户名">
                  <el-input class="ipt" v-model="formData.username" placeholder="请输入用户名" clearable></el-input>
                </el-form-item>
                 <el-form-item label="*密码">
                  <el-input class="ipt" v-model="formData.password" placeholder="请输入密码" show-password></el-input>
                </el-form-item>
                 <el-form-item label="*邮箱">
                    <el-input class="ipt" v-model="formData.email" placeholder="请输入邮箱" clearable></el-input>
                </el-form-item>
                 <el-form-item label="*电话">
                   <el-input class="ipt" v-model="formData.mobile" placeholder="请输入电话号码" clearable></el-input>
                </el-form-item>
                <el-form-item class="submit">
                    <el-button type="default">取消</el-button>
                    <el-button type="primary" @click="show = true">添加用户</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>
<script setup>
import { ArrowRight, Search, Edit, Star, Delete, } from '@element-plus/icons'
import { reactive, ref } from 'vue'
import { getUserList } from '@/api'
let tableData = ref([]) 
let obj = {pagenum:1, pagesize: 10}
let show = ref(false)
// 添加用户的表单数据
let formData = reactive({
    username:'',
    password:'',
    email:'',
    mobile:''
})
let rules = reactive({
    username:[
        {
            required:true,
            message:"用户名不能为空",
            trigger:'blur'
        }
    ],
    password:[
        {
            required:true,
            message:"用户名不能为空",
            trigger:'blur'
        }
    ]
})
// let {users} = await getUserList(obj)
getUserList(obj).then(res => {
    // console.log(res);
    tableData.value = res.users
})
</script>
<style lang="scss" scoped>
.nav-item {
    font-size: 12px;
}
.content {
    margin-top: 20px;
    .ipt {
        width: 500px;
    }
}
.submit {
    text-align: right;
}
</style>

